<template>
  <div class="app">
    <button @click="setSonTestMsg">修改子组件变量</button>
    <zi
      style="background-color: aqua; color: #fff"
      :params="ziParams"
      ref="ziDom"
    ></zi>
    <!-- <input type="text" id="inp" ref="iptDom" /> -->
    <!-- {{ objVal }} -->
    <!-- <br /> -->
    <!-- {{ objTestVal }} -->
    <!-- <button @click="setVal()">该变量</button> -->
  </div>
</template>
<script setup>
import zi from "./zi.vue";
import { ref, provide } from "vue";
const ziParams = ref("父组件的变量");
const ziDom = ref(null);
function setSonTestMsg() {
  ziDom.value.testMsg = new Date().getTime();
}
provide("test", "父组件的变量-provide");
// import { ref, reactive, watch } from "vue";
// const textVal = ref("");
// const objVal = reactive({
//   name: 123,
// });
// const iptDom = ref(null);
// let objTestVal = reactive("123");
// function setVal() {
//   objVal.name = new Date().getTime();
//   objTestVal = new Date().getTime();
//   textVal.value = new Date().getTime();
//   console.log(iptDom.value);
// }
// watch(objVal, () => {
//   console.log(objTestVal, 23);
// });
// watch(textVal, () => {
//   console.log(textVal, 26);
// });
//事件循环机制 Event Loop
//js 是单线程的 执行顺序 由上向下 （主线程）
//微任务 （.then .catch .finally .all .race ... async await） 宏任务 (dom渲染，请求队列，定时器相关)
// console.log(1);
// setTimeout(() => {
//   console.log(2);
// }, 0);
// console.log(3);
// new Promise((resolve, reject) => {
//   console.log(4);
//   resolve();
// }).then(() => {
//   console.log(5);
// });
// 1 3 4 5 2
//创建前 配置准备好
//后 {data,methods,watch}
//挂载前 new vue({data,methods,watch})
//后 dom 生成了
//更新前
//后
//销毁前
//后
// B/S 运行在浏览器上的项目 都是b/s架构 C/S 不基于浏览器的项目是c/s架构
// data(){
//   return {
//     name: "123",
//   };
// }
// vue2 基于 Object.defineProperty
// let obj = {};

// Object.defineProperty(obj, "name", {
//   value: "Alice",
//   writable: true, // 属性值是否可以被修改
//   enumerable: true, // 属性是否可以被枚举
//   configurable: true, // 属性描述符是否可以被改变
// });

// console.log(obj.name); // 输出: Alice
// obj.name = "Bob";
// console.log(obj.name); // 输出: Bob
let obj = { name: 123, age: 12 };
Object.defineProperty(obj, "name", {
  get() {
    let a;
    if (document.getElementById("inp")) {
      a = document.getElementById("inp").value;
    }
    return a;
  },
  set(val) {
    console.log("set");
    document.getElementById("inp").value = val;
    this._name = val;
  },
});
console.log(obj.name);
function setVal() {
  console.log(obj.name, 86);
  obj.name = "456561323";
  obj.age = 123;
}
// data(){
//   return {
//     obj:{name:222}
//   };
// }

// vue3 proxy
let target = {
  message: "Hello, world!",
};

let handler = {
  get(target, property) {
    console.log(`Getting ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting ${property} to ${value}`);
    target[property] = value;
    return true;
  },
};

let proxy = new Proxy(target, handler);

console.log(proxy.message); // 输出: Getting message
proxy.message = "Hello, Proxy!"; // 输出: Setting message to Hello, Proxy!
</script>
